<template>
  <div class="card-wrapper van-hairline--bottom">
    <div class="card-img">
      <img :src="images[0]" alt="" ref="img" />
    </div>
    <div class="card-content">
      <div class="title overflow-hidden">{{ title }}</div>
      <div class="desc overflow-hidden">{{ desc }}</div>
      <div class="tags">
        <div v-for="(item, i) in tags" :key="i">{{ item }}</div>
      </div>
      <div class="price">￥{{ price }}</div>
      <div class="counter">
        <div @touchend="counter(id, -1)" v-if="num">
          <img
            src="https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/rec.png"
          />
        </div>
        <div class="num" v-if="num">{{ num }}</div>
        <div @touchend="counter(id, 1)">
          <img
            src="https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/add.png"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入购物车飞入动画
import Animate from '@/tools/animate';
import { mapMutations } from 'vuex';

export default {
  props: ['images', 'tags', 'title', 'price', 'desc', 'id', 'num', 'nofly'],
  methods: {
    ...mapMutations(['setStorage']),

    counter(id, num) {
      //   console.log(e.target);
      this.setStorage({ id, value: num });
      // 如果是减去商品则不需要飞入购物车效果
      if (num === -1) {
        return;
      }
      if (this.nofly) {
        return;
      }
      //   ***************
      //  商品图片飞入购物车效果
      const { top, left } = this.$refs.img.getBoundingClientRect(); // 获取商品图片的左顶点位置
      const { offsetWidth: imgWidth, offsetHeight: imgHeight } = this.$refs.img; // 获取商品图片的宽高

      //   shop-car是在****tabbar组件购物车按钮添加id****，方便获取元素
      const shopCar = document.getElementById('shop-car');
      const { left: carX, top: carY } = shopCar.getBoundingClientRect(); // 获取底部购物车的左顶点位置
      const { offsetWidth: carWidth, offsetHeight: carHeight } = shopCar; // 获取底部购物车的宽高

      //   计算要运动路径的  起始位置(商品图片的top，left)  和  终止位置(购物车左顶点位置+元素宽高各一半才是移动路径终点的  中心位置 )
      const endX = carX + carWidth / 2;
      const endY = carY + carHeight / 2;

      // 根据起始和终止位置运动，函数单独写到tools/animate，在上方import导入
      Animate({
        //   起始位置
        startX: left,
        startY: top,
        // 结束位置
        endX,
        endY,
        // 要运动的图片地址
        src: this.$refs.img.src,
        // 图片的宽高
        width: imgWidth,
        height: imgHeight,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.card-wrapper {
  width: 100%;
  display: flex;
  height: 100px;

  .card-img {
    width: 90px;
    margin: 0 5px 0 0px;
    img {
      width: 90px;
      height: 90px;
    }
  }
  .card-content {
    flex: 1;
    position: relative;
    > div {
      width: 170px;
    }
    .title {
      font-size: 13px;
      color: #1a1a1a;
      margin-top: 5px;
    }
    .desc {
      font-size: 11px;
      color: #aaa;
      margin-top: 5px;
    }
    .tags {
      display: flex;
      margin-top: 5px;
      > div {
        font-size: 10px;
        padding: 2px;
        color: #aaa;
        border-radius: 4px;
        margin-right: 5px;
        border: 1px solid #aaa;
      }
    }
    .price {
      font-size: 14px;
      padding: 2px;
      margin-top: 5px;
      color: #ff1a90;
      font-weight: 600;
    }
    .counter {
      position: absolute;
      bottom: 8px;
      right: 18px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      > div:not(.num) {
        width: 16px;
        height: 16px;
        img {
          width: 100%;
        }
      }
      .num {
        padding: 0 5px;
        height: 16px;
        line-height: 16px;
      }
    }
  }
}
.overflow-hidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
